<script setup>
import { computed, ref } from "vue";
import SvgIcon from "../../svgIcon/index.vue";
import screenfull from "screenfull";
import { message } from "ant-design-vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

// 是否是全屏，默认不全屏
const isFullScreen = ref(false);

// 切换全屏
const changeFullScreen = () => {
  if (!screenfull.isEnabled) {
    message.error(t("fullscreen.error"));
    return false;
  }
  screenfull.toggle();
  isFullScreen.value = !isFullScreen.value;
};
</script>

<template>
  <a-tooltip arrowPointAtCenter placement="bottom">
    <template #title>
      <span>{{
        isFullScreen ? $t("fullscreen.exit") : $t("fullscreen.do")
      }}</span>
    </template>
    <div class="action" @click="changeFullScreen">
      <SvgIcon
        :name="isFullScreen ? 'FullscreenExitOutlined' : 'FullscreenOutlined'"
        :style="{ fontSize: '16px' }"
      />
    </div>
  </a-tooltip>
</template>